import 'package:flutter/material.dart';
import 'package:flutter_html/flutter_html.dart';
import '../../../utils/G.dart';
import 'product_comment.dart';
import 'product_recommendation.dart';

class ProductDescription extends StatefulWidget {
  Map detail;
  ProductDescription({Key? key, required Map this.detail}) : super(key: key);

  @override
  _ProductDescriptionState createState() => _ProductDescriptionState();
}

class _ProductDescriptionState extends State<ProductDescription> {
  List types = [
    {'title': '详情'},
    {'title': '评论'},
    {'title': '推荐'}
  ];
  int currentIndex = 0;
  Widget _content = Container();

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _content = Html(data: widget.detail['storeInfo']['description'].toString());
  }

  @override
  Widget build(BuildContext context) {
    return Wrap(
      direction: Axis.horizontal,
      children: [
        // 菜单
        Container(
            height: 50,
            child: ListView.builder(
                itemCount: types.length,
                scrollDirection: Axis.horizontal,
                itemBuilder: (BuildContext context, int index) {
                  return _renderType(index);
                })),

        // 内容
        _content
      ],
    );
  }

  Widget _renderType(int index) {
    return GestureDetector(
        child: Container(
            width: G.width / types.length,
            alignment: Alignment.center,
            padding: const EdgeInsets.symmetric(vertical: 2, horizontal: 10),
            decoration: BoxDecoration(
                color: Colors.grey.shade100,
                border: Border(
                    bottom: BorderSide(
                        width: 3,
                        color: currentIndex == index
                            ? Theme.of(context).primaryColor
                            : Colors.grey.shade100))),
            child: Text(types[index]['title'],
                style: TextStyle(
                  color: currentIndex == index
                      ? Theme.of(context).primaryColor
                      : Colors.black45,
                  fontSize: 16,
                  fontWeight:
                      currentIndex == index ? FontWeight.w600 : FontWeight.w400,
                ))),
        onTap: () {
          currentIndex = index;

          if (index == 1) {
            _content = ProductComment(detail: widget.detail);
          } else if (index == 2) {
            _content = ProductRecommendation(
                recommendation: widget.detail['good_list']);
          } else {
            _content = Html(
                data: widget.detail['storeInfo']['description'].toString());
          }

          setState(() {});
        });
  }
}
